<template>
  <div class="set-container">
    <div class="set-content">
      <div class="set-head">系统设置</div>

      <!-- 添加蜂鸣器设置表头 -->
      <div class="set-head buzzer-head">蜂鸣器设置</div>

      <div class="set-form info-card">
        <div class="set-item">
          <div class="set-item-label">蜂鸣器：</div>
          <div class="set-item-span">
            <a-switch v-model:checked="formData.isNeedBuzzer" checked-children="开" un-checked-children="关" />
          </div>
        </div>
        <div class="set-item">
          <div class="set-item-label">数据丢失时间：</div>
          <div class="set-item-span">
            <a-input v-model:value="formData.alarmThresholdTime" suffix="分" :disabled="!formData.isNeedBuzzer" />
          </div>
        </div>
        <div class="set-item set-button">
          <a-button type="primary" @click="handleSubmit">确认修改</a-button>
          <a-button @click="handleReset">重 置</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { iotApi } from '/@/api/business/iotSystem/index';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';

  const formData = ref({
    configId: undefined,
    isNeedBuzzer: false,  // 默认蜂鸣器关闭
    alarmThresholdTime: 0,
  });

  async function handleSubmit() {
    SmartLoading.show();
    try {
      await iotApi.setIotConfig(formData.value);
      message.success('操作成功');
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
    return false;
  }

  async function handleReset() {
    try {
      let queryResult = await iotApi.getIotConfig();
      formData.value = queryResult.data;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      //
    }
  }

  onMounted(() => {
    handleReset();
  });
</script>

<style scoped lang="less">
  .set-container {
    padding: 15px;
    background-color: #fff;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    .set-content {
      margin-bottom: 20px;
      .set-head {
        font-size: 16px;
        margin-bottom: 20px;
        font-weight: 700;
      }
      /* 新添加的蜂鸣器设置表头样式 */
      .buzzer-head {
        font-size: 14px;
        margin-bottom: 15px;
        font-weight: 600;
        color: #1890ff; /* 可以根据需要调整颜色 */
      }
      .info-card {
        max-width: 700px;
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px #ddd;
        margin-top: 20px;
      }
      .set-form {
        .set-item {
          display: flex;
          height: 32px;
          align-items: center;
          margin-bottom: 20px;
          &:last-of-type {
            margin: 0;
          }
          .set-item-label {
            width: 110px;
            text-align: right;
          }
          .set-item-span {
            margin-left: 10px;
          }
        }
        .set-button {
          width: 330px;
          display: flex;
          justify-content: space-evenly;
        }
      }
    }
  }
</style>
